<template>
<div class="">
  <div class="user-infor">
    <div class="number">
      <span>用户编号：</span>
      <span class="value">{{$route.params.usrId}}</span>
    </div>
    <div class="address">
      <span>账户地址：</span>
      <span class="value">{{blockInfo.blockAddress}}</span>
    </div>
  </div>
  <div class="" v-infinite-scroll="searchBlock" infinite-scroll-distance="10">
    <div class="block-wrp" v-for="block in blockList" v-if="blockList.length">
      <ul class="block-title">
        <li class="even-container">
          <span>事件: </span>
          <span>{{block.even}}</span>
        </li>
        <li class="btn-container">
          <button type="button" class="lookInfor" name="button" @click="queryDealDInfor($event, block.tradeNo)">
              <span><i class="iconfont icon-miyuesuo-"></i></span>
              <span>查看交易信息</span>
            </button>
        </li>
      </ul>
      <ul class="block-infor">
        <li>
          <span>交易时间：</span>
          <span class="value">{{block.date}}</span>
        </li>
        <li>
          <span>芸券数：</span>
          <span class="value">{{block.yunNum}}</span>
        </li>
        <li>
          <span>来源：</span>
          <span class="value">{{block.fromUsr}}</span>
        </li>
      </ul>
    </div>
  </div>
  <no-data v-if="!blockList.length"></no-data>
  <!-- <div class="loading-box" v-if="moreInfo">
		<list-loading @clickEvent="searchBlock" :noMoreCoupon="noMore" ></list-loading>
	</div> -->
  <div class="lastInfoMore" v-if="!moreInfo" v-show="blockList.length!=0">没有更多</div>
  <!-- 弹框 -->
  <div class="modal-wrapper" v-if="modal">
    <div class="modal-container">
      <div class="title-wrapper">
        <span class="icon" @click="isCancel"><i class="iconfont icon-left" v-if="decodeView"></i></span>
        <span class="title" v-if="decodeView">输入密钥查看交易信息</span>
        <span class="success" v-else>交易信息</span>
      </div>
      <!-- 解密 -->
      <template v-if="decodeView">
          <form class="pwdForm" action="#"  @submit.prevent="decodeBlock">
            <ul class="inputBox" @click="fillKey">
              <li v-for="(num, index) in 8" :key="index">
                <div class="num-box">
                  <span ref="key">
                    {{blockCodeKey[index]}}
                  </span>
                  <span class="balck_dot" ref="keyDot" style="display:none;"></span>
                </div>
              </li>
            </ul>
            <input type="text" name="" class="_inputBox" v-model="blockCodeKey" @keyup="keyup" ref="_inputBox" maxlength="8"/>
          </form>
          <div class="reminder">
            输入8位密钥查看交易信息（区分大小写）
          </div>
          <div class="btn-wrp">
            <button type="button" class="lookInfor" name="button" @click="decodeBlock">
              解密
            </button>
            <div class="searchPwd" @click="showPwdAddr" v-if="!pwdAddr">
              密钥在哪里找？
            </div>
          </div>
          <div class="pwdAddr" v-show="pwdAddr">
            <img src="../../images/pwdAddr.png" alt="">
          </div>
      </template>
      <!-- 解密成功 -->
      <template v-else>
          <ul class="block-infor">
            <li class="clearfix">
              <span>事件</span>
              <span class="value">{{keyWord.even}}</span>
            </li>
            <li class="clearfix">
              <span>交易时间</span>
              <span class="value">{{keyWord.date | Time}}</span>
            </li>
            <li class="clearfix">
              <span>芸券数</span>
              <span class="value">{{keyWord.yunNum}}</span>
            </li>
            <li class="clearfix">
              <span>来源</span>
              <span class="value">{{keyWord.fromUsr}}</span>
            </li>
          </ul>
          <div class="btn-wrp">
            <button type="button" class="lookInfor" name="button" @click="isCancel">
              关闭
            </button>
          </div>
        </template>
    </div>
  </div>
</div>
</template>

<script>
import {
  secretPwd,
  ownBlockInfor,
  deCodePwd
} from '../../service/getData3.js'
import * as types from '../../vuex/types.js'
import ListLoading from '../../componentes/global/listLoading.vue'
import {
  Toast
} from 'mint-ui';

export default {
  name: "block-list",
  components: {
    ListLoading
  },
  data: () => ({
    noMore: true,
    popup: true,
    currentPage: 0,
    totalPage: 0,
    blockCodeKey: '',
    blockList: [],
    keyWord: {},
    pwdAddr: false,
    modal: false,
    decodeView: true,
    popupVisible: true,
    tradeNo: '',
    blockInfo: {},
    moreInfo:true
  }),
  computed: {
    searchVal() {
      return this.$route.params.usrId
    },
  },
  methods: {
    keyup: function(e) {
      let keyCode = e.keyCode
      let index = this.blockCodeKey.length
      let that = this
      if(keyCode === 8 && index >= 0){
        this.$refs.keyDot[index].style.display = 'none'
      }
      if(keyCode !== 8 && index <= 8){
        setTimeout(function() {
          for (let i = 0; i < index; i++) {
            that.$refs.key[i].style.visibility = 'hidden'
            that.$refs.keyDot[i].style.display = 'block'
          }
        },300)
      }
    },
    fillKey: function(e, num, index) {
      this.$refs._inputBox.focus()
    },
    queryDealDInfor: function(e, tradeNo) {
      e.preventDefault();
      e.stopPropagation();
      this.modal = true
      this.tradeNo = tradeNo
      // 获取焦点拉起手机键盘
      this.$nextTick(function() {
        this.$refs._inputBox.focus()
        this.decodeView = true
      })
    },
    isCancel: function() {
      this.modal = false
      this.pwdAddr = false
      this.decodeView = true
      this.blockCodeKey = ''
    },
    showPwdAddr: function() {
      this.pwdAddr = true
    },
    searchBlock() {
        let me = this;
        if( !me.noMore){
            return
        }
      secretPwd({
        currentPage: this.currentPage + 1,
        usrId: this.searchVal
      }).then(res =>{
          me.noMore = false;
          if(res.respCode === "00"){
              if (res.content) {
                  if (res.content.list.length<10) {
                    me.moreInfo=false
                  }else{
                    me.moreInfo=true;
                  }
                  let list = res.content.list;
                  this.blockList = this.blockList.concat(list);
                  this.currentPage = res.content.current;
                  this.totalPage = Math.ceil(res.content.total / 5);
                  if (this.totalPage >= this.currentPage + 1) {
                      this.currentPage += 1;
                  }
              }
              //延迟loading下拉显示可进行再次下拉请求
              setTimeout(function(){
                  me.$nextTick(() =>me.noMore = true )
              },700)
          }else{
              me.noMore = true;
          }

      })
    },
    decodeBlock: function(e) {
      e.preventDefault();
      // 验证判断
      if (this.blockCodeKey && this.blockCodeKey.length === 8) {
        deCodePwd({
          dataPwd: this.blockCodeKey,
          tradeNo: this.tradeNo,
          usrId: this.searchVal
        }).then(res => {
          if (res.respCode !== '00') {
            Toast({
              message: res.errorInfo
            });
            this.blockCodeKey = ''
            for (let i = 0; i < 8; i++) {
              this.$refs.keyDot[i].style.display = 'none'
            }
            return
          }
          this.keyWord = res.content.list[0]
          this.decodeView = false
        })
      } else if (this.blockCodeKey.length < 8 && this.blockCodeKey.length > 0) {
        Toast({
          message: '请输入8位数的密钥'
        });
      } else {
        Toast({
          message: '请输入密钥'
        });
      }
    }
  },
  created() {
  },
  mounted: function() {
    ownBlockInfor({
      usrId: this.searchVal
    }).then(res => {
      if (res.content) {
        this.blockInfo = res.content.block || ""
      }
    }).catch(err => {})
  },
  filters: {
    Time: function(value) {
      let timeVal = `${value.substring(0, 4)}.${value.substring(4, 6)}.${value.substring(6, 8)}`
      return timeVal;
    }
  },
  beforeRouteLeave(to,from,next){

    next();
  },
}
</script>

<style lang="scss" scoped>
.user-infor {
    color: #333;
    width: 94%;
    margin: auto auto 0.5rem;
    padding: 0.8rem;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0 0 0.2rem 0.2rem;
    font-size: 1rem;
    overflow: hidden;
    > div {
        line-height: 1.8rem;
        &.number {
            margin-bottom: 0.4rem;
            overflow: hidden;
        }
        > span {
            float: left;
            color: #555;
            &:first-child {
                width: 28%;
            }
            &.value {
                width: 72%;
                font-size: 1rem;
                text-align: right;
                word-wrap: break-word;
            }
        }
    }
}

.block-wrp {
    background-color: #fff;
    width: 94%;
    box-sizing: border-box;
    margin: auto;
    overflow: hidden;
    padding: 0.8rem 0;
    border-radius: 0.2rem;
    color: #555;
    margin-bottom: 0.5rem;
    ul.block-title {
        height: 3rem;
        font-size: 1rem;
        line-height: 2.4rem;
        border-bottom: 1px solid #eee;
        padding: 0 0.8rem 0.8rem;
        li.even-container {
            float: left;
        }
        li.btn-container {
            float: right;
            .lookInfor {
                padding: 0.4rem 0.8rem;
                // height: 2.4rem;
                border-radius: 0.2rem;
                background: linear-gradient(to right, #ec4e8a , #f95a7c);
                color: #fff;
                font-size: 1rem;
                span {
                    float: left;
                    line-height: 1.4rem;
                }
                i {
                    margin-right: 0.3rem;
                    font-size: 1.2rem;
                }
            }
        }
    }
}

ul.block-infor {
    font-size: 1rem;
    line-height: 1.8rem;
    padding: 0.8rem 0.8rem 0;
    overflow: hidden;
    li {
        span {
            float: left;
            color: #555;
            margin-bottom: 0.2rem;
            &:first-child {
                width: 28%;
            }
            &.value {
                width: 72%;
                text-align: right;
                word-wrap: break-word;
            }
        }
    }
}

.modal-wrapper {
    // display: none;
    position: fixed;
    overflow: scroll;
    background-color: rgba(0,0,0,0.4);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    .modal-container {
        width: 88%;
        margin: auto;
        background-color: #fff;
        margin-top: 24%;
        margin-bottom: 12%;
        border-radius: 0.2rem;
        padding: 0.8rem 0.6rem;
        overflow: hidden;
    }
}
.modal-container {
    .title-wrapper {
        border-bottom: 1px solid #eee;
        color: #333;
        overflow: hidden;
        padding: 0.8rem 0;
        margin-bottom: 0.8rem;
        span {
            float: left;
            &.icon {
                width: 20%;
                color: #999;
            }
            &.title {
                width: 80%;
                text-align: center;
                margin-left: -10%;
                font-size: 1.2rem;
                color: #333;
            }
            &.success {
                width: 100%;
                text-align: center;
                font-size: 1.2rem;
                color: #333;
            }
        }
        &:after {
            content: "";
            display: block;
            clear: both;
        }
    }
}

.pwdForm {
    position: relative;
    overflow: hidden;
    .inputBox {
        width: 94%;
        margin: auto;
        border-right: 1px solid #ec4e8a;
        overflow: hidden;
        &:after {
            content: '';
            display: block;
            clear: both;
        }
        li {
            float: left;
            width: 12.5%;
            border: 1px solid #ec4e8a;
            box-sizing: border-box;
            border-right: none;
            cursor: pointer;
            .num-box {
                width: 100%;
                padding-bottom: 100%;
                position: relative;
                span {
                    display: block;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    width: 100%;
                    line-height: 2rem;
                    height: 2rem;
                    text-align: center;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 102;
                }
                .balck_dot {
                  display: inline-block;
                  width: 0.6rem;
                  height: 0.6rem;
                  border-radius: 50%;
                  background-color: #333;
                }
            }
        }
    }

}

._inputBox {
    background-color: rgba(0,0,0,0);
    font-size: 1rem;
    color: rgba(0,0,0,0);
    // text-indent: 999rem;
    opacity: 0;
    border: 1px solid #ccc;
    // cursor:none;
    position: fixed;
    left: -100px;
    top: -100px;
}

.reminder {
    width: 94%;
    margin: 0.6rem auto 0;
    color: #999;
    font-size:1rem;
}

.btn-wrp {
    width: 94%;
    margin: 1.6rem auto 1rem;
    .lookInfor {
        padding: 0.8rem;
        border-radius: 0.2rem;
        background: linear-gradient(to right, #ec4e8a , #f95a7c);
        color: #fff;
        font-size: 1rem;
        width: 100%;
    }
    .searchPwd {
        text-align: center;
        color: #ec4e8a;
        margin-top: 1.6rem;
        font-size: 1rem;
    }
}

.pwdAddr {
    width: 80%;
    margin: auto;
    overflow: hidden;
    img {
        max-width: 100%;
    }
}
</style>
